从零开始Vue3+Element Plus后台管理系统(十四)

您所在的位置：网站首页 › wpf 打印预览 › 从零开始Vue3+Element Plus后台管理系统(十四)

从零开始Vue3+Element Plus后台管理系统(十四)

2023-06-02 21:16| 来源: 网络整理| 查看: 265

其实我常常会纠结今天要写什么内容。

因为希望能够保持每日更新，所以要写的内容不能太难——最好是半天可以搞出demo并且输出文章，所以很多东西浅尝辄止，并没有深入研究，还写出了一些bug 🐛

今天又浅浅的研究了下在Vue3中如何预览PDF

vue-pdf-embed

刚开始尝试 vue3-pdfjs，可以很快做出预览界面，但它没有自带打印功能，所以继续在github中翻啊翻。

最终选择了vue-pdf-embed https://github.com/hrynko/vue-pdf-embed#examples，它的功能强大一些，可以满足预览和打印的功能。

npm install vue-pdf-embed 缩放

初始化时获取容器宽度，把组件的width设为容器宽度数值，然后通过调整width的值来控制缩放。

// 设置初始宽度 onMounted(() => { wpWidth = wpRef.value.clientWidth width.value = wpWidth }) function zoom(type: number) { if ((scale.value 5 && type === 1)) return scale.value = scale.value + type * 0.1 width.value = scale.value * wpWidth } 打印

调用print()，配置参数

print resolution (number) 分辨率, filename (string), all pages flag (boolean)

function print() { pdfRef.value.print(150, null, true) }

完整代码 ❮ {{ page }} / {{ pageCount }} ❯ 打印 import { ref, onMounted } from 'vue' import VuePdfEmbed from 'vue-pdf-embed' const pdfRef = ref() const wpRef = ref() let pdfSource = ref('/L16 心动-编配谱.pdf') let isLoading = ref(true) let page = ref(1) let scale = ref(1) let pageCount = ref(0) let wpWidth = 0 let width = ref(0) onMounted(() => { wpWidth = wpRef.value.clientWidth width.value = wpWidth }) function handleDocumentRender() { isLoading.value = false pageCount.value = pdfRef.value.pageCount } function zoom(type: number) { if ((scale.value 5 && type === 1)) return scale.value = scale.value + type * 0.1 width.value = scale.value * wpWidth } function print() { pdfRef.value.print(150, null, true) } function handlePasswordRequest(callback: any, retry) { callback(prompt(retry ? 'Enter password again' : 'Enter password')) } 项目地址

本项目GIT地址：github.com/lucidity99/…

如果有帮助，给个star ✨ 点个赞👍

【本文地址】

从零开始Vue3+Element Plus后台管理系统(十四)

从零开始Vue3+Element Plus后台管理系统(十四)

今日新闻

推荐新闻